<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>h.264 To fmp4</title>
  <script src="/js/jquery-3.0.0.js"> </script>
  <script type="text/javascript" src="/js/jmuxer.js"></script>

  <style type="text/css" media="screen">
    video.rotate180 {
      width: 100%;
      height: 100%;
      transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
    }
  </style>

</head>

<body>
<h2>h.264 To fmp4</h2>
<button id="playView">预览</button>
<button id="stopView">停止</button>
<div class="wfsjs">
  <video id="player" style="width: 50%;height: 50%;" autoplay="autoplay" muted></video>
  <div class="ratio"></div>
</div>

<script>
  var jmuxer;
  var ws;
  /**
   * 登录并预览按钮点击：先请求 登录+预览接口，然后返回将返回的lUserID拼接到socket地址后面，创建一个websocket。
   * 然后创建wfs实列 ，执行wfs.attachWebsocket()和wfs.attachMedia(),最后将socket和vide标签绑定给创建的wfs即可
   */
  $("#playView").click(function () {
    var socketURL = 'ws://127.0.0.1:10086/manyws/2';

    jmuxer = new JMuxer({
      node: 'player',
      mode: 'video',
      flushingTime: 1000,
      fps: 30,
      debug: false,
      onError: function(data) {
        if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
          jmuxer.reset();
        }
      }
    });

    ws = new WebSocket(socketURL);
    ws.binaryType = 'arraybuffer';
    ws.addEventListener('message',function(event) {
      // console.log(event.data);
      jmuxer.feed({
        video: new Uint8Array(event.data)
      });
    });

    ws.addEventListener('error', function(e) {
      console.log('Socket Error');
    });
  })

  $("#stopView").click(function () {
    ws.close();
  });
</script>

</body>

</html>